PAGES = {
  main: `<div>
  <el-row :gutter="6">
    <el-col :span="6"
      ><div class="grid-content">
        <router-link to="/device">PLC数据类型</router-link>
      </div></el-col
    >
    <el-col :span="6">
      <div class="grid-content">
        <router-link to="/rule">读写测试页面</router-link>
      </div>
    </el-col>
    <el-col :span="6"
      ><div class="grid-content">(LZ1) {{ plc.LZ1.value | uint32 }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(S34) {{ plc.S34.value }}</div></el-col
    >
  </el-row>
  <el-row :gutter="6">
    <el-col :span="6"
      ><div class="grid-content">(X43) {{ plc.X23.value }}</div></el-col
    >

    <el-col :span="6"
      ><div class="grid-content">(Y52) {{ plc.Y2a.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(M46) {{ plc.M46.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(SM5) {{ plc.SM5.value }}</div></el-col
    >
  </el-row>
  <el-row :gutter="6">
    <el-col :span="6"
      ><div class="grid-content">(L37) {{ plc.L37.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(F53) {{ plc.F53.value }}</div></el-col
    >

    <el-col :span="6"
      ><div class="grid-content">(B8+2) {{ plc.B0A.value }}</div></el-col
    >

    <el-col :span="6"
      ><div class="grid-content">(SB28+5) {{ plc.SB2D.value }}</div></el-col
    >
  </el-row>
  <el-row :gutter="6">
    <el-col :span="6"
      ><div class="grid-content">(TS1) {{ plc.TS1.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(TC1) {{ plc.TC1.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(TN1) {{ plc.TN1.value | uint16 }}</div></el-col
    >
    <el-col :span="6"><div class="grid-content"></div></el-col>
  </el-row>
  <el-row :gutter="6">
    <el-col :span="6"
      ><div class="grid-content">(STS3) {{ plc.STS3.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(STC3) {{ plc.STC3.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(STN3) {{ plc.STN3.value | uint16 }}</div></el-col
    >
    <el-col :span="6"><div class="grid-content"></div></el-col>
  </el-row>
  <el-row :gutter="6">
    <el-col :span="6"
      ><div class="grid-content">(CS0) {{ plc.CS0.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(CC0) {{ plc.CC0.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(CN0) {{ plc.CN0.value | uint16 }}</div></el-col
    >
    <el-col :span="6"><div class="grid-content"></div></el-col>
  </el-row>
  <el-row :gutter="6">
    <el-col :span="6"
      ><div class="grid-content">(LCS1) {{ plc.LCS1.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(LCC1) {{ plc.LCC1.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(LCN1) {{ plc.LCN1.value | uint32 }}</div></el-col
    >
    <el-col :span="6"><div class="grid-content"></div></el-col>
  </el-row>
  <el-row :gutter="6">
    <el-col :span="6"
      ><div class="grid-content">(R0) {{ plc.R0.value | uint16 }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(R1) {{ plc.R1.value | uint16 }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(D0) {{ plc.D0.value | uint16 }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(D1) {{ plc.D1.value | uint16 }}</div></el-col
    >
  </el-row>
  <el-row :gutter="6">
    <el-col :span="6"
      ><div class="grid-content">(SD0) {{ plc.SD0.value | uint16 }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(SD1) {{ plc.SD1.value | uint16 }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(W0) {{ plc.W0.value | uint16 }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(W1) {{ plc.W1.value | uint16 }}</div></el-col
    >
  </el-row>
  <el-row :gutter="6">
    <el-col :span="6"
      ><div class="grid-content">(SW0) {{ plc.SW0.value | uint16 }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(SW1) {{ plc.SW1.value | uint16 }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(Z0) {{ plc.Z0.value | uint16 }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(Z1) {{ plc.Z1.value | uint16 }}</div></el-col
    >
  </el-row>
</div>`,
  device: `<div>
  <el-row :gutter="6">
    <el-col :span="6"
      ><div class="grid-content">
        <router-link to="/rule">读写测试页面</router-link>
      </div></el-col
    >
    <el-col :span="6">
      <div class="grid-content">
        <router-link to="/grid">24份栅格页面样式</router-link>
      </div>
    </el-col>
    <el-col :span="6"
      ><div class="grid-content">(LZ1) {{ plc.LZ1.value }}</div></el-col
    >
    <el-col :span="3"
      ><div class="grid-content">(S18) {{ plc.S18.value }}</div></el-col
    >
    <el-col :span="3"
      ><div class="grid-content">(S34) {{ plc.S34.value }}</div></el-col
    >
  </el-row>
  <el-row :gutter="6">
    <el-col :span="6"
      ><div class="grid-content">(X15) {{ plc.Xd.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(X43) {{ plc.X23.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(X114) {{ plc.X4c.value }}</div></el-col
    >
    <el-col :span="6"><div class="grid-content"></div></el-col>
  </el-row>
  <el-row :gutter="6">
    <el-col :span="6"
      ><div class="grid-content">(Y16) {{ plc.Ye.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(Y26) {{ plc.Y16.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(Y52) {{ plc.Y2a.value }}</div></el-col
    >
    <el-col :span="6"><div class="grid-content"></div></el-col>
  </el-row>
  <el-row :gutter="6">
    <el-col :span="6"
      ><div class="grid-content">(M14) {{ plc.M14.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(M46) {{ plc.M46.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(SM5) {{ plc.SM5.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(SM21) {{ plc.SM21.value }}</div></el-col
    >
  </el-row>
  <el-row :gutter="6">
    <el-col :span="6"
      ><div class="grid-content">(L37) {{ plc.L37.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(L68) {{ plc.L68.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(F9) {{ plc.F9.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(F53) {{ plc.F53.value }}</div></el-col
    >
  </el-row>
  <el-row :gutter="6">
    <el-col :span="6"
      ><div class="grid-content">(B8) {{ plc.B8.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(B8+2) {{ plc.B0A.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(B38+3) {{ plc.B3B.value }}</div></el-col
    >
    <el-col :span="6"><div class="grid-content"></div></el-col>
  </el-row>
  <el-row :gutter="6">
    <el-col :span="6"
      ><div class="grid-content">(SB7) {{ plc.SB7.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(SB8+4) {{ plc.SB0C.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(SB28+5) {{ plc.SB2D.value }}</div></el-col
    >
    <el-col :span="6"><div class="grid-content"></div></el-col>
  </el-row>
  <el-row :gutter="6">
    <el-col :span="6"
      ><div class="grid-content">(TS1) {{ plc.TS1.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(TC1) {{ plc.TC1.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(TN1) {{ plc.TN1.value }}</div></el-col
    >
    <el-col :span="6"><div class="grid-content"></div></el-col>
  </el-row>
  <el-row :gutter="6">
    <el-col :span="6"
      ><div class="grid-content">(STS3) {{ plc.STS3.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(STC3) {{ plc.STC3.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(STN3) {{ plc.STN3.value }}</div></el-col
    >
    <el-col :span="6"><div class="grid-content"></div></el-col>
  </el-row>
  <el-row :gutter="6">
    <el-col :span="6"
      ><div class="grid-content">(CS0) {{ plc.CS0.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(CC0) {{ plc.CC0.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(CN0) {{ plc.CN0.value }}</div></el-col
    >
    <el-col :span="6"><div class="grid-content"></div></el-col>
  </el-row>
  <el-row :gutter="6">
    <el-col :span="6"
      ><div class="grid-content">(LCS1) {{ plc.LCS1.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(LCC1) {{ plc.LCC1.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(LCN1) {{ plc.LCN1.value }}</div></el-col
    >
    <el-col :span="6"><div class="grid-content"></div></el-col>
  </el-row>
  <el-row :gutter="6">
    <el-col :span="6"
      ><div class="grid-content">(R0) {{ plc.R0.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(R1) {{ plc.R1.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(D0) {{ plc.D0.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(D1) {{ plc.D1.value }}</div></el-col
    >
  </el-row>
  <el-row :gutter="6">
    <el-col :span="6"
      ><div class="grid-content">(SD0) {{ plc.SD0.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(SD1) {{ plc.SD1.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(W0) {{ plc.W0.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(W1) {{ plc.W1.value }}</div></el-col
    >
  </el-row>
  <el-row :gutter="6">
    <el-col :span="6"
      ><div class="grid-content">(SW0) {{ plc.SW0.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(SW1) {{ plc.SW1.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(Z0) {{ plc.Z0.value }}</div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content">(Z1) {{ plc.Z1.value }}</div></el-col
    >
  </el-row>
</div>`,
  grid: `<div>
  <el-row :gutter="6">
    <el-col :span="4"><div class="grid-content">4</div></el-col>
    <el-col :span="5"><div class="grid-content">24份栅格系统</div></el-col>
    <el-col :span="6"><div class="grid-content">6</div></el-col>
    <el-col :span="9"><div class="grid-content">9</div></el-col>
  </el-row>
  <el-row :gutter="6">
    <el-col :span="7">
      <div class="grid-content">
        <router-link to="/">回主页面</router-link>
      </div></el-col
    >
    <el-col :span="8"><div class="grid-content">8</div></el-col>
    <el-col :span="9"><div class="grid-content">9</div></el-col>
  </el-row>
  <el-row :gutter="6">
    <el-col :span="10"><div class="grid-content">10</div></el-col>
    <el-col :span="11"><div class="grid-content">11</div></el-col>
    <el-col :span="3"><div class="grid-content">3</div></el-col>
  </el-row>
  <el-row :gutter="6">
    <el-col :span="6"><div class="grid-content">6</div></el-col>
    <el-col :span="6"><div class="grid-content"></div></el-col>
    <el-col :span="12"><div class="grid-content">12</div></el-col> </el-row
  ><el-row :gutter="6">
    <el-col :span="1"><div class="grid-content">1</div></el-col>
    <el-col :span="2"><div class="grid-content">2</div></el-col>
    <el-col :span="3"><div class="grid-content">3</div></el-col>
    <el-col :span="18"><div class="grid-content">18</div></el-col>
  </el-row>
  <el-row :gutter="6">
    <el-col :span="15"><div class="grid-content">15</div></el-col>
    <el-col :span="9"><div class="grid-content">9</div></el-col>
  </el-row>
  <el-row :gutter="6">
    <el-col :span="16"><div class="grid-content">16</div></el-col>
    <el-col :span="8"><div class="grid-content">8</div></el-col>
  </el-row>
  <el-row :gutter="6">
    <el-col :span="17"><div class="grid-content">17</div></el-col>
    <el-col :span="7"><div class="grid-content">7</div></el-col>
  </el-row>
</div>`,
  rule: `<div class="WRtest">
  <el-row :gutter="12">
    <el-col :span="10">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="80px"
      >
        <el-form-item label="PLC地址" prop="addr">
          <el-input
            type="text"
            v-model="addrToUpper"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="数据类型" prop="type">
          <el-select v-model="ruleForm.type" placeholder="请选择数据类型">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="warning" @click="write('ruleForm')">写入</el-button>
          <el-button type="primary" @click="read('ruleForm')">读取</el-button>
        </el-form-item>

        <el-form-item label="写入值" prop="val">
          <el-input v-model.number="ruleForm.val"></el-input>
        </el-form-item>
      </el-form>
    </el-col>

    <el-col :span="10" :offset="2">
      <el-input
        type="textarea"
        :rows="5"
        placeholder="查询结果显示"
        v-model="textarea"
        disabled
      >
      </el-input>

      <el-input
        type="textarea"
        :rows="4"
        placeholder="此处用可用于复制"
        v-model="copyarea"
        style="margin-top: 20px"
      >
      </el-input>
    </el-col>
  </el-row>
 <hr>
 <img src="./img/errcode.PNG" title="错误代码说明" style="margin-left: -20px;">
 <hr>
 <img src="./img/datatype.PNG" title="地址数据类型" style="margin-left: -30px;">
</div>`,
};
